<template>
    <div>
        <h1 >{{postName}}</h1>
        <el-tag >{{entName}}</el-tag>
        <el-tag style="margin-left:10px" >{{money}}</el-tag>
        <el-divider></el-divider>
        <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
            <div class="reply-info">
                <div
                    tabindex="0"
                    contenteditable="true"
                    id="replyInput"
                    spellcheck="false"
                    placeholder="输入评论..."
                    class="reply-input"
                    @focus="showReplyBtn"
                    @input="onDivInput($event)"
                >
                </div>
            </div>
            <div class="reply-btn-box" v-show="btnShow">
                <el-button class="reply-btn" size="medium" @click="sendComment" type="primary">发表评论</el-button>
            </div>
        </div>
        <div v-for="(item,i) in comments" :key="i" class="author-title reply-father">
            <div class="author-info">
                <span class="author-name">{{item.fromName}}</span>
                <span class="author-time">{{item.createTime}}</span>
            </div>
            <div class="icon-btn">
                <span style="color: #a8a8a8" @click="showReplyInput(i,item.fromName,item.fromId,item.id)">
                    <i style="color: #a8a8a8" class="iconfont el-icon-s-comment"></i>{{item.commentNum}}</span>
            </div>
            <div class="talk-box">
                <p>
                    <span style="font-size: 18px" class="reply">{{item.content}}</span>
                </p>
            </div>
            <div class="reply-box">
                <div v-for="(reply,j) in item.replyList" :key="j" class="author-title">
                    <div class="author-info">
                        <span class="author-name">{{reply.fromName}}
                            <span style="color:#57c2be;">@ {{reply.toName}}</span>
                        </span>
                        <span  class="author-time">{{reply.createTime}}</span>
                    </div>
                    <div class="icon-btn">
                        <span style="color: #a8a8a8" @click="showReplyInput(i,reply.fromName,reply.fromId,reply.id)">
                            <i style="color: #a8a8a8" class="iconfont el-icon-s-comment">
                        </i>{{reply.commentNum}}</span>
                    </div>
                    <div class="talk-box">
                        <p>
                            <span class="reply">{{reply.content}}</span>
                        </p>
                    </div>
                    <div class="reply-box">

                    </div>
                    <div class="reply-box">
                        <div v-for="(re,j) in reply.replyList" :key="j" class="author-title">
                            <div class="author-info">
                        <span class="author-name">{{re.fromName}} 回复
                            <span style="color: #b6b6b6">{{re.toName}}</span>
                        </span>
                                <span  class="author-time">{{re.createTime}}</span>
                            </div>
                            <div class="icon-btn">
                        <span style="color: #a8a8a8" @click="showReplyInput(i,re.fromName,re.fromId,reply.id)">
                            <i style="color: #a8a8a8" class="iconfont el-icon-s-comment">
                        </i>{{re.commentNum}}</span>
                            </div>
                            <div class="talk-box">
                                <p>
                                    <span class="reply">{{re.content}}</span>
                                </p>
                            </div>
                            <div class="reply-box">

                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <div v-show="_inputShow(i)" class="my-reply my-comment-reply">
                <div class="reply-info">
                    <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..."
                         @input="onDivInput($event)" class="reply-input reply-comment-input"></div>
                </div>
                <div class=" reply-btn-box">
                    <el-button class="reply-btn" size="medium" @click="sendCommentReply(i,j)" type="primary">发表评论
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    const clickoutside = {
        // 初始化指令
        bind (el, binding, vnode) {
            function documentHandler (e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e)
                }
            }

            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.vueClickOutside = documentHandler
            document.addEventListener('click', documentHandler)
        },
        update () {
        },
        unbind (el, binding) {
            // 解除事件监听
            document.removeEventListener('click', el.vueClickOutside)
            delete el.vueClickOutside
        },
    }
    export default {
        name: 'ArticleComment',
        data () {
            return {
                btnShow: false,
                index: '0',
                replyComment: '',
                user: JSON.parse(window.sessionStorage.getItem('user')),
                to: '',
                toId: -1,
                id:"",
                postId: "",
                postName: "",
                entName: "",
                money: "",
                comments:[]
            }
        },
        directives: { clickoutside },
        created () {
            const post = this.$route.query.post
            let p = JSON.parse(post)
            this.postId = p.postId
            this.postName = p.postName
            this.entName = p.entName
            this.money = p.money
            this.getComments()
        },
        methods: {
            getComments () {
                let self = this;
                let postId = self.postId;
                let comments = []
                this.utils.sendReq({
                    queryUrl:`/comment/get/${postId}`,
                    req:{
                        method:'get',
                        success:function (req) {
                            if (req.data.code == 200){
                                for (let i in req.data.data) {
                                    comments.push(req.data.data[i])
                                }
                                self.comments = comments
                            }
                        }
                    }
                })
            }
            ,
            inputFocus () {
                var replyInput = document.getElementById('replyInput')
                replyInput.style.padding = '8px 8px'
                replyInput.style.border = '2px solid blue'
                replyInput.focus()
            },
            showReplyBtn () {
                this.btnShow = true
            },
            hideReplyBtn () {
                // this.btnShow = false
                // replyInput.style.padding = '10px'
                // replyInput.style.border = 'none'
            },
            showReplyInput (i, name, toid,id) {
                this.comments[this.index].inputShow = false
                this.index = i
                this.comments[i].inputShow = true
                this.to = name
                this.toId = toid
                this.id = id;
            },
            _inputShow (i) {
                return this.comments[i].inputShow
            },
            sendComment () {
                if (!this.replyComment) {
                    this.$message({
                        showClose: true,
                        type: 'warning',
                        message: '评论不能为空'
                    })
                } else {
                    let self = this;
                    let comment = {}
                    let input = document.getElementById('replyInput')
                    comment.toId = this.postId;
                    comment.content = this.replyComment
                    this.utils.sendReq({
                        queryUrl:'/comment/addComment',
                        req:{
                            data:comment,
                            method:'post',
                            success:function (req) {
                                if (req.data.code == 200){
                                    self.$message({
                                        message: req.data.msg,
                                        type: 'success',
                                        showClose: true,
                                        center: true
                                    })
                                    self.getComments();
                                }
                            }
                        }
                    })
                    this.replyComment = ''
                    input.innerHTML = ''

                }
            },
            sendCommentReply (i, j) {
                if (!this.replyComment) {
                    this.$message({
                        showClose: true,
                        type: 'warning',
                        message: '评论不能为空'
                    })
                } else {
                    let self = this;
                    let reply = {};
                    reply.toId = this.toId;
                    reply.toName = this.to;
                    reply.content = this.replyComment
                    reply.commentId = this.id;
                    this.utils.sendReq({
                        queryUrl:'/comment/addReply',
                        req:{
                            data:reply,
                            method:'post',
                            success:function (req) {
                                if (req.data.code == 200){
                                    self.$message({
                                        message: req.data.msg,
                                        type: 'success',
                                        showClose: true,
                                        center: true
                                    })
                                    self.getComments();
                                }
                            }
                        }
                    })
                    this.replyComment = ''
                    document.getElementsByClassName('reply-comment-input')[i].innerHTML = ''
                }
            },
            onDivInput: function (e) {
                this.replyComment = e.target.innerHTML
            },
            dateStr (date) {
                //获取js 时间戳
                var time = new Date().getTime()
                //去掉 js 时间戳后三位，与php 时间戳保持一致
                time = parseInt((time - date) / 1000)
                //存储转换值
                var s
                if (time < 60 * 10) {//十分钟内
                    return '刚刚'
                } else if ((time < 60 * 60) && (time >= 60 * 10)) {
                    //超过十分钟少于1小时
                    s = Math.floor(time / 60)
                    return s + '分钟前'
                } else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
                    //超过1小时少于24小时
                    s = Math.floor(time / 60 / 60)
                    return s + '小时前'
                } else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
                    //超过1天少于30天内
                    s = Math.floor(time / 60 / 60 / 24)
                    return s + '天前'
                } else {
                    //超过30天ddd
                    var date = new Date(parseInt(date))
                    return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
                }
            }
        },
    }
</script>
<style lang="stylus" scoped>
    .my-reply
        padding 10px
        background-color #fafbfc

        .header-img
            display inline-block
            vertical-align top

        .reply-info
            display inline-block
            margin-left 5px
            width 90%
            @media screen and (max-width: 1200px) {
                width 80%
            }

            .reply-input
                min-height 20px
                line-height 22px
                padding 10px 10px
                color #ccc
                background-color #fff
                border-radius 5px

                &:empty:before
                    content attr(placeholder)

                &:focus:before
                    content none

                &:focus
                    padding 8px 8px
                    border 2px solid blue
                    box-shadow none
                    outline none

        .reply-btn-box
            height 25px
            margin 10px 0

            .reply-btn
                position relative
                float right
                margin-right 15px

    .my-comment-reply
        margin-left 50px

        .reply-input
            width flex

    .author-title:not(:last-child)
        border-bottom: 1px solid rgba(178, 186, 194, .3)

    .author-title
        padding 10px

        .header-img
            display inline-block
            vertical-align top

        .author-info
            display inline-block
            margin-left 5px
            width 60%
            height 40px
            line-height 20px

            > span
                display block
                cursor pointer
                overflow hidden
                white-space nowrap
                text-overflow ellipsis

            .author-name
                color #282828
                font-size 18px
                font-weight bold

            .author-time
                color #9c9c9c
                font-size 14px

        .icon-btn
            width 80%
            padding 0 !important
            float right
            margin-top: px
            margin-bottom: 0px
            @media screen and (max-width: 1200px) {
                width 20%
                padding 7px
            }

            > span
                cursor pointer

            .iconfont
                margin 0 5px

        .talk-box
            margin 0 30px

            > p
                margin 0

            .reply
                font-size 16px
                color #363636

        .reply-box
            margin 10px 0 0 50px
            background-color #eaeaea
</style>



